<template>
	<view class="technician_dom">
		<nav>
			<span @click='region'>{{dzs||dz}}</span><u-icon @click='region' name="play-right-fill" color="#2A2A2A"
				size="12"></u-icon>
			<u-search :color='"#333"' v-model="obj.search" shape="round" @custom='custom'></u-search>
		</nav>
		<view class="tab">
			<button @click='tab("distance")' :class="{'button':obj.order_field=='distance'}">距离较近</button>
			<button @click='tab(0)' :class="{'button':obj.order_field==0}">全部</button>
			<button @click='tab("score")' :class="{'button':obj.order_field=='score'}">好评优先</button>
		</view>
		<view class="main">
			<view class="nav" v-if='tab_type'>
				<view @click='types(0)' :class="{'view':obj.cid==0}">全部 <span></span></view>
				<view v-for='value in tabs' :key="value.id" @click='types(value.id)'
					:class="{'view':obj.cid==value.id}">{{value.title}}<span></span></view>
			</view>

			<image v-if="list.length==0" src="../../static/image.png"></image>

			<view class="list" v-for='value in list' :key='value.id'>
				<nav @click="showImg($imgUrl,value.avatar,value.image)">
					<p v-if="value.targ">{{value.targ==1?'热门':value.targ==1?'王牌':'新人'}}</p>
					<image class="avatar" :src="$imgUrl+value.avatar"></image>
					<span>查看更多</span>
					<!-- <image class="trump" v-if="value.targ==2" mode="widthFix" src="../../static/2.png"></image>
					<image class="hot" v-if="value.targ==1" mode="widthFix" src="../../static/1.png"></image>
					<image class="new" v-if="value.targ==3" mode="widthFix" src="../../static/3.png"></image> -->
				</nav>
				<main>
					<view>
						{{value.username}}
						<image @click="skip('/pages/shop/shop?id='+value.id)" src="../../static/user/53.png"></image>
						<span @click="skip('/pages/shop/shop?id='+value.id)">{{value.partner_name}}</span>
					</view>
					<span>近半年已服务：{{value.order_count}}单</span>
					<p>
						<image @click="skip('/pages/watchComment/watchComment?id='+value.id)"
							src="../../static/technician/10.png">
						</image><span
							@click="skip('/pages/watchComment/watchComment?id='+value.id)">{{value.evaluate_count}}</span>
						<u-icon @click="collect(value.id)" name="heart-fill"
							:color="value.is_collect==0?'#CECECE':'#52C276'" size="18"></u-icon>
						<span @click="collect(value.id)">{{value.collect_count}}</span>
						<u-icon name="star-fill" color="#52C276" size="18"></u-icon>
						<span>{{value.score}}</span>
					</p>
				</main>
				<view>
					<span>最早可约:今天{{value.appoint_time==0?'已约满':value.appoint_time}}</span>
					<p>{{value.distance}}km<span v-if="value.tech_distance">{{value.tech_distance+'km内免车费'}}</span></p>
					<button :class="{'button':value.work_status==1}" v-if="obj.goods_id == 0"
						:disabled="value.work_status==1"
						@click="skip('/pages/appointment/appointment?id='+value.id+'&type=0')">
						{{value.work_status==1?'休息中':'立即预约'}}
					</button>
					<button :class="{'button':value.work_status==1}" v-if="obj.goods_id > 0"
						:disabled="value.work_status==1"
						@click="skip('/pages/orderForGoods/orderForGoods?goods_id='+obj.goods_id+'&tech_id='+value.id+'&type=0')">
						{{value.work_status==1?'休息中':'立即预约'}}
					</button>
				</view>
			</view>
		</view>
		<!-- <iframe style="position: fixed;top: 0;left: 0;100% 100%" src='https://m.amap.com/picker/?keywords=parameter1&zoom=parameter2&center=parameter3&radius=parameter4&total=parameter5&key=parameter6'></iframe> -->
		<!-- 地区选择 -->
		<!-- <u-picker :show="show" closeOnClickOverlay @close="close" @cancel='close' @confirm='confirm' :columns="dzlist" keyName='name'></u-picker> -->
	</view>
</template>


<script>
	var jweixin = require('jweixin-module');
	import wx from 'weixin-js-sdk'
	import bus from '../../config/emit.js'
	export default {
		name: "technician_dom",
		data() {
			return {
				lng: "1",
				lat: "2",
				index: 0,
				type: 0,
				tabs: [],
				show: false,
				dzs: '',
				appId: "111",
			};
		},
		created() {
			this.tabs = JSON.parse(uni.getStorageSync('cid'));
		},
		props: ['tab_type', 'list', 'obj', 'dz', 'dzlist'],
		methods: {
			collect(id) {
				this.$httpRequest('/goods/collect', {
					tech_id: id
				}).then(() => {
					bus.$emit('refresh', 1)
				})
			},
			close() {
				this.show = false
			},
			region() {
				uni.chooseLocation({
					success: (res) => {
						this.lng = res.longitude;
						this.lat = res.latitude;
						this.obj.lng = res.longitude
						this.obj.lat = res.latitude
						bus.$emit('refresh', 1)
						this.$httpRequest('/tech/locationAnalysis', {
							lng: res.longitude,
							lat: res.latitude
						}).then(res => {
							this.dzs = res.data.address_component.city;
							this.obj.city = res.data.ad_info.adcode
						})

					}
				});
			},
			skip(url) {
				uni.navigateTo({
					url,
				})
			},
			custom() {
				if (this.obj.search) {
					bus.$emit('refresh', 1)
				}
			},
			tab(index) {
				if (index !== this.obj.order_field) {
					this.obj.page = 1
					this.obj.order_field = index
					bus.$emit('refresh', 1)
				}
			},
			types(index) {
				if (this.obj.cid !== index) {
					this.obj.cid = index
					bus.$emit('refresh', 1)
				}
			},
			showImg(imgUrl, img, image) {
				let arr = [];
				arr.push(imgUrl + img);
				image.forEach(item => {
					arr.push(imgUrl + item);
				});
				uni.previewImage({
					urls: arr
				})
			},
		}
	}
</script>

<style lang="less">
	.technician_dom {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx 0 0rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #53C277 0%, #81E2A8 100%);

		&>.main {
			width: 100%;
			background: #F0F0F0;
			min-height: calc(100vh - 246rpx);
			transform: translateY(-30rpx);
			border-radius: 32rpx 32rpx 0 0;
			padding: 20rpx 0 20rpx;

			&>image {
				width: 616rpx;
				height: 616rpx;
				display: block;
				margin: 50rpx auto 0;
			}

			&>.list {
				width: 710rpx;
				height: 176rpx;
				background: #fff;
				border-radius: 10rpx;
				margin: 0 auto 20rpx;
				display: flex;
				position: relative;

				&>nav {
					width: 154rpx;
					height: 154rpx;
					margin: auto 20rpx auto 10rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					// border-radius: 50%;
					overflow: hidden;

					&>span {
						width: 100%;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						text-align: center;
						background-color: #00000090;
						font-size: 12px;
						color: #fff;
					}

					&>p {
						position: absolute;
						top: 10rpx;
						left: 0;
						font-size: 10px;
						color: #fff;
						background: #52C276;
						border-radius: 0 14rpx 14rpx 0;
						padding: 2rpx 8rpx 2rpx 4rpx;
						z-index: 2;
					}

					&>image {
						image-rendering: -moz-crisp-edges;
						image-rendering: -o-crisp-edges;
						image-rendering: -webkit-optimize-contrast;
						image-rendering: crisp-edges;
						-ms-interpolation-mode: nearest-neighbor;
					}

					&>.avatar {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
						// border-radius: 50%;
					}

					&>.trump {
						width: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}

					&>.hot {
						width: 38rpx;
						position: absolute;
						right: 8rpx;
						bottom: 8rpx;
					}

					&>.new {
						width: 50rpx;
						position: absolute;
						left: -10rpx;
						top: -10rpx;
					}
				}

				&>view {
					width: 172rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					box-sizing: border-box;
					padding-bottom: 10rpx;

					&>span {
						font-size: 12px;
						background: #BBF0D0;
						color: #52C276;
						padding: 0 10rpx;
						border-radius: 0 10rpx 0 10rpx;
						position: absolute;
						top: 0;
						right: 0;
						min-width: 172rpx;
						white-space: nowrap;
					}

					&>p {
						font-size: 11px;
						color: #52C276;
						text-align: center;
						display: flex;
						flex-direction: column;
					}

					&>.button {
						background: #ccc;
					}

					&>button {
						width: 136rpx;
						height: 50rpx;
						background: #52C276;
						color: #fff;
						border-radius: 10rpx;
						line-height: 50rpx;
						padding: 0;
						font-size: 12px;
					}
				}

				&>image {
					width: 154rpx;
					height: 154rpx;
					margin: 10rpx 20rpx 10rpx 10rpx;
					border-radius: 8rpx;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>main {
					display: flex;
					flex-direction: column;
					flex: 1;

					&>view {
						font-size: 15px;
						color: #333333;
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						&>b {
							font-weight: 400;
							font-size: 12px;
							color: #999999;
						}

						&>.u-icon {
							margin: 0 12rpx;
						}

						&>span {
							font-size: 12px;
							color: #666666;
						}

						&>image {
							width: 27rpx;
							height: 27rpx;
							margin: 0 10rpx;
						}
					}

					&>span {
						font-size: 12px;
						color: #999999;
						margin: 12rpx 0;
					}

					&>p {
						font-size: 14px;
						color: #999999;
						display: flex;
						align-items: center;

						&>.u-icon {
							margin: 0 12rpx 0 40rpx;
							// transform: translateY(3rpx);
						}

						&>image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
					}
				}
			}

			&>.nav {
				width: 100%;
				padding: 0rpx 60rpx 10rpx;
				display: flex;
				box-sizing: border-box;

				&>.view {
					color: #3B7933;
					font-weight: 600;

					&>span {
						background: #82E3A9;
						border-radius: 6rpx;
					}
				}

				&>view {
					flex: 1;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 15px;
					color: #999999;

					&>span {
						width: 46rpx;
						height: 6rpx;
						background: #82E3A900;
						margin-top: 6rpx;
					}
				}
			}
		}

		&>.tab {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;

			&>.button {
				color: #55B075;
				background: #E2FFEC;
			}

			&>button {
				width: 142rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 15px;
				margin: 0 20rpx;
				padding: 0;
				color: #55B075;
				background-color: #74D997;
			}
		}

		&>nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #2A2A2A;
			font-size: 12px;
			padding: 0 30rpx 0 40rpx;
			box-sizing: border-box;

			&>.u-icon {
				transform: rotateZ(90deg) !important;
				margin: 0 12rpx;
			}
		}
	}
</style>